<template>
    <div class="my-service bg-white mx-[20rpx] mt-[20rpx] rounded-lg service">
    <!--    <div
            v-if="content.title"
            class="title px-[30rpx] py-[20rpx] font-medium text-xl border-light border-solid border-0 border-b"
        >
            <div>{{ content.title }}</div>
        </div> -->
        <div v-if="content.style == 1" class="flex flex-wrap pt-[40rpx] pb-[20rpx]">
            <div
                v-for="(item, index) in content.data"
                :key="index"
                class="flex flex-col items-center w-1/4 mb-[15px]"
                @click="handleClick(item.link)"
            >
                <u-image width="52" height="52" :src="getImageUrl(item.image)" alt="" />
                <div class="mt-[7px]">{{ item.name }}</div>
            </div>
        </div>
		<!-- <view>
			<image src=""></image>
		</view> -->
	<div>
		<button  class="kefu flex items-center border-light border-solid border-0  h-[100rpx] px-[24rpx]"  hover-class='none' @click="gotokefuFn">
			<!-- <view class=""> -->
				<u-image width="48" height="48" src="https://shengyue.yaoyunxin.cn/uploads/images/20240127/202401271107257b53b2474.png" plain alt="" style="border: none;outline: none;"/>
				<div class="ml-[20rpx]" style="font-size: 28rpx;">联系客服</div>
				<div class="text-muted" style="text-align: right; flex: 1;">
				    <u-icon name="arrow-right" />
				</div>
			<!-- </view> -->
			
		</button>
	</div>
        <div v-if="content.style == 2">
            <div
                v-for="(item, index) in content.data"
                :key="index"
                class="flex items-center border-light border-solid border-0  h-[100rpx] px-[24rpx]"
                @click="handleClick(item.link,isLogin)"
            >
                <u-image width="48" height="48" :src="getImageUrl(item.image)" alt="" />
                <div class="ml-[20rpx] flex-1">{{ item.name }}</div>
                <div class="text-muted">
                    <u-icon name="arrow-right" />
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
	isLogin: {
	     type: Boolean 
	}
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any,is:any) => {
	console.log(is,'isLogin');
	if(is){
		navigateTo(link)
	}else{
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
}
const gotokefuFn=()=>{
	window.location.href=`https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzkwMzY0MTAwMQ==&scene=110#wechat_redirect`
}
</script>

<style lang="scss" scoped>
	.service{
		margin-top: 200rpx !important;
	}
	.kefu{
		background-color: #fff;
		// display: block;
		// // border: 0rpx;
		// display: flex;
		font-size: 29rpx;
		color: #333;
		// // display: block;
		// align-items: center;
		// height: 100rpx;
		// border-color: #fff;
	}
	
	// button[plain]{ 
	//     border:0 ;
	// }
		button::after {
		  border: none;
		}
</style>
